<template>
        <rx-grid
            ref="table"
            :allowRowSelect="true"
            :multiSelect="true"
            :columns="groupColumns"
            :defaultPageSize="10"
            :dataSource="groupData"
            @selectChange="onSelectGroupChange"
            :pageSizeOptions="['10','30','40']"
            id-field="party2"
            rowKey="party2"
            :showPageSize="true"
            :showPageJump="false"
            :showPageEntry="true"
            :url="url"
            :queryParam="queryParam"
            data-field="result.data"
        >
            <span slot="action" slot-scope="{text, record}">
             <a @click="joinUser(record)">{{$ti18('rxList.joinBtn','加入')}}</a>
              &nbsp;&nbsp;
              <a @click="relInstEdit(record)">{{$ti18('rxList.editBtn','编辑')}}</a>
          </span>
        </rx-grid>

</template>

<script>
  import OsRelInstApi from '@/api/user/org/osRelInst'
  import {notification} from "ant-design-vue";
  import { Util } from "@lowcode/jpaas-common-lib"
  import OsRelInstGroupRelUsers from "./OsRelInstGroupRelUsers";
  import OsRelInstEdit from "@/views/modules/user/org/OsRelInstEdit"

  export default {
    name: 'groupListComponent',
    props: {
      url :"",
      relTypeId:String,
      relType:String,
      relTypeKey:String,
      dimId2:String,
      groupId:String,
      tenantId:String
    },
    data () {
      return {
        visible: false,
        selectedGroupRowKeys: [],
        selectedGroupRows: [],
        groupData: [],
        // 表头
        groupColumns: [
          {
            title: this.$ti18('rxForm.name','名称'),
            dataIndex: 'alias'
          },
          {
            title: this.$ti18('rxList.action','操作'),
            indentWidth: '180px',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'}
          }
        ],
        action:'',
          queryParam:{
              relTypeId:this.relTypeId,
              groupId:this.groupId,
              orgRelName:''
          }
      }
    },
    created () {
      this.init()
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"osGroup",key);
      },
      i18Comp(name,text,key){
        return this.$ti18(name,text,"GroupListComponent",key);
      },

      orgSearch(orgRelName){
          this.queryParam.orgRelName=orgRelName
          this.$refs.table.onRefresh();
      },
      init(){
        var selfThis=this
        this.queryParam.groupId=this.groupId;
        if(!this.groupId){
          this.groupData = [];
        }else {
            this.$nextTick(()=>{
                this.$refs.table.onRefresh();
            })
        }

      },
      onSelectGroupChange (selectedRowKeys, selectedRows) {
        this.selectedGroupRowKeys = selectedRowKeys
        this.selectedGroupRows = selectedRows
      },
      joinUser(record){
          var params={p1:record.party1,p2:record.party2,dimId1:record.dimId1,dimId2:record.dimId2,relTypeId:record.relTypeId};
          if(this.tenantId){
              params.tenantId=this.tenantId;
          }
          var conf= {
              curVm:this,
              data:params,
              widthHeight:['800px', '600px'],
              component:OsRelInstGroupRelUsers,
              title:record.alias + this.i18n('groupRel.joinTitle','用户管理')
          };
          Util.open(conf,function(action){});
      },
        relInstEdit(record){
            let self_=this;
            let params={pkId:record.instId,instId:record.instId};
            if(this.tenantId){
                params.tenantId=this.tenantId;
            }
            let conf= {
                curVm:this,
                data:params,
                widthHeight:['500px', '550px'],
                component:OsRelInstEdit,
                title:this.i18n('groupRel.editTitle','编辑组关系')
            };
            Util.open(conf,function(action){
                if(action=='ok'){
                    self_.init();
                }
            });
        },
        removeSelectGroup(){
            let tipSelect=this.i18Comp("msa.tipSelect","请先选择组关系!")
            let tipTitle=this.i18Comp("msa.tipTitle","提示信息!");
            let tipOk=this.i18Comp("msa.ok","确认!");
            let tipCancel=this.i18Comp("msa.cancel","确认!");
            let confirmRemove=this.i18Comp("msa.confirmRemove","确认将移除选中的组关系吗?");

            if(this.selectedGroupRowKeys.length==0){
              this.$message.warn(tipSelect);
              return
            }
            let self_=this;
            if(this.selectedGroupRowKeys.length>0){
                  this.$confirm({
                      title: tipTitle,
                      content: confirmRemove,
                      okText: tipOk,
                      cancelText: tipCancel,
                      onOk() {
                          self_.unjoin(self_.selectedGroupRowKeys.join(','))
                      },
                      onCancel() {},
                  });
              }
        },
      unjoin(groupIds){

        const scopeThis=this
        OsRelInstApi.unjoinRelInst({ids: groupIds, relTypeId: this.relTypeId, groupId: this.groupId}).then(res => {
          if (res.success && res.code == 200) {
            scopeThis.init()
            scopeThis.selectedGroupRowKeys = []
          }
        })
      }
    },
    watch:{
      'groupId' (){
        this.init()
      }
    }
  }
</script>

<style scoped>

</style>
